<!DOCTYPE html>


<html lang="zh-CN">


<head>
  <meta charset="utf-8" />
    
  <meta name="description" content="杰克小麻雀的博客" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床 |  半亩方塘
  </title>
  <meta name="generator" content="hexo-theme-ayer">
  
  <link rel="shortcut icon" href="/favicon.ico" />
  
  
<link rel="stylesheet" href="/dist/main.css">

  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css">

  
<link rel="stylesheet" href="/css/custom.css">

  
  
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

  
  

  

</head>

</html>
<body>
  <div id="app">
    
      
      <canvas width="1777" height="841"
        style="position: fixed; left: 0px; top: 0px; z-index: 99999; pointer-events: none;"></canvas>
      
    <main class="content on">
      <section class="outer">
  <article
  id="post-从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub Gitee图床"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床
</h1>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/01/14/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E4%BA%94)%E2%80%94%E2%80%94Typora%20+%20PicGo%20+%20GitHub%20Gitee%E5%9B%BE%E5%BA%8A/" class="article-date">
  <time datetime="2021-01-14T08:10:50.000Z" itemprop="datePublished">2021-01-14</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a>
  </div>
  
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> 字数统计:</span>
            <span class="post-count">5k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> 阅读时长≈</span>
            <span class="post-count">18 分钟</span>
        </span>
    </span>
</div>
 
    </div>
      
    <div class="tocbot"></div>




  
    <div class="article-entry" itemprop="articleBody">
       
  <blockquote>
<p>   ​    本文是博客搭建系列文章第五篇，其他文章链接：</p>
<ol>
<li>从零开始免费搭建自己的博客(一)——<a target="_blank" rel="noopener" href="https://yushuaige.github.io/2020/12/31/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2-%E4%B8%80-%E2%80%94%E2%80%94%E6%9C%AC%E5%9C%B0%E6%90%AD%E5%BB%BAhexo%E6%A1%86%E6%9E%B6/">本地搭建 Hexo 框架</a></li>
<li>从零开始免费搭建自己的博客(二)——<a target="_blank" rel="noopener" href="https://yushuaige.github.io/2021/01/01/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2-%E4%BA%8C-%E2%80%94%E2%80%94%E5%9F%BA%E4%BA%8E-GitHub-pages-%E5%BB%BA%E7%AB%99/">基于 GitHub pages 建站</a></li>
<li>从零开始免费搭建自己的博客(三)——<a target="_blank" rel="noopener" href="https://yushuaige.github.io/2021/01/02/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2-%E4%B8%89-%E2%80%94%E2%80%94%E5%9F%BA%E4%BA%8E-Gitee-pages-%E5%BB%BA%E7%AB%99/">基于 Gitee pages 建站</a></li>
<li>从零开始免费搭建自己的博客(四)——<a target="_blank" rel="noopener" href="https://yushuaigee.gitee.io/2021/01/11/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E5%9B%9B)%E2%80%94%E2%80%94%E7%BC%96%E5%86%99Markdown%E6%96%87%E7%AB%A0%E5%88%A9%E5%99%A8%20Typora/">编写Markdown文章利器 Typora</a></li>
<li><strong>从零开始免费搭建自己的博客(五)——<a target="_blank" rel="noopener" href="https://yushuaigee.gitee.io/2021/01/14/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E4%BA%94)%E2%80%94%E2%80%94Typora%20+%20PicGo%20+%20GitHub%20Gitee%E5%9B%BE%E5%BA%8A/">Typora + PicGo + GitHub/Gitee图床</a></strong></li>
<li>从零开始免费搭建自己的博客(六)——三个站点一键发布博客</li>
<li>从零开始免费搭建自己的博客(七)——迁移 CSDN 博客到个人博客站点</li>
<li>从零开始免费搭建自己的博客(八)——博客网站个性化设置及优化</li>
</ol>
</blockquote>
<hr>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>前面我们搭建好了博客，选择了 Typora 作为创作软件，但是现在一篇博客从写完到发布到网站还是有许多步骤要手动处理，比如处理图片路径，发布更新等。写博客已经很耗费时间了，我们肯定不希望花费大量时间在部署上，毕竟使用 CSDN 等平台写博客时只需一键就可以发布博客，所以有必要把一些重复工作自动化，提升自己的创作体验。接下来两篇文章就做这件事情，首先是完成图床的搭建，然后是通过脚本一键发布博客。</p>
<p>本篇文章先介绍怎么搭建自己的免费图床。我尝试了各种组合方案，最终选用了最方便的 Typora + PicGo + GitHub + jsDelivr CDN加速的方案。不过既然前面讲了使用 Gitee Pages 建站，这里也介绍一下使用 Gitee 搭建图床的方法。关于 Typora 的使用介绍见上一篇文章。</p>
<h2 id="什么是图床"><a href="#什么是图床" class="headerlink" title="什么是图床"></a>什么是图床</h2><p>图床是什么？Picture bed？No ，其实是 Picture host，即提供外链访问的图片存储服务器（看了《西部世界》，见到 “host” 最先想到的竟是“接待员” -.-）。通俗讲就是你把图片上传到一个图床提供者的图片服务器上，它会生成一个存储链接，你就可以随时通过这个链接就下载这个图片，而且还可以把这个链接放到 html 里或者 Markdown 文件里，浏览时再由浏览器或者阅读器自动加载出来。</p>
<p>具体有什么用呢？对于我们的 Markdown 格式的博客而言，图片就成了一个文本，你可以把文章复制到 CSDN/简书/知乎/个人博客等地方，每次换地方不需要重新上传图片，这些网站都能根据图床链接将图片加载出来。这样一说是不是发现“图床”这个翻译还挺贴切的。</p>
<p>当然也有翻车的时候，有时候我们浏览网页时，发现文字都能加载出来，图片都变成了一个个的叉号，这就是因为图床挂了，网站无法根据链接加载到图片，所以图床的稳定性就很重要了。还有一个问题，就是外链大家都可以访问，那么你的图片就很容易被盗链，别人直接用你的链接就可以下载到你的高清大图，版权问题不说，如果你是使用付费图床，一般是按访问流量收费，别人在文章中直接用你的图片链接，走的都是你的流量费，不过现在的图床都提供了防盗链方案。</p>
<p>图床服务国内的有微博图床、聚合图床、七牛云、阿里云、腾讯云等，国外的有 imgur、imgbox、SM图床等，大都是要收费的。此外也有些免费的图床服务，但是不敢用啊，万一哪天没了。</p>
<p>其实我们可以利用 GitHub 的存储能力和对外开放访问的特点，将 GitHub 仓库作为图床。不但免费，而且不用担心图床挂掉，毕竟如果 GitHub 挂了，部署在 GitHub Pages 的博客网站也打不开了，还管什么图片能不能加载出来。当然也请大家合理利用资源，GitHub仓库有 1G 大小的上限。</p>
<h2 id="什么是-PicGo"><a href="#什么是-PicGo" class="headerlink" title="什么是 PicGo"></a>什么是 PicGo</h2><p>PicGo 是一位中国开发者基于 electron-vue 开发的用于快速上传图片并获取图片 URL 链接的开源工具，GitHub主页：<a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/PicGo">PicGo</a>，作者博客：<a target="_blank" rel="noopener" href="https://molunerfinn.com/">MARKSZのBlog</a>。</p>
<p>写文章需要引用图片时，我们要打开浏览器将图片上传到图床服务器，再把链接复制粘贴到文章中。这太影响效率了，能不能每次插入图片时自动把图片上传并返回链接地址呢？PicGo 便是做这件事的软件，只要配置好图床类型，就可以直接拖拽图片进行上传并自动返回图片链接，配合 Typora 还可以实现在文章中插入图片时自动上传并替换为链接内容，完全不用感知上传图片的过程。</p>
<p>PicGo 本体支持七牛云、腾讯云、又拍云、阿里云、SM、Imgur、GitHub这些图床，而且还支持自己扩展第三方图床的支持插件，比如就有人开发了 Gitee 的插件。更多介绍见<a target="_blank" rel="noopener" href="https://picgo.github.io/PicGo-Doc/zh/guide/#%E5%90%AC%E8%AF%B4%E4%BD%A0%E4%B9%9F%E6%83%B3%E7%94%A8picgo">官方文档</a>，下载地址：<a target="_blank" rel="noopener" href="https://molunerfinn.com/PicGo/">PicGo</a></p>
<p>打开下载地址，选择一个版本点进去，点击下载对应的安装包安装即可。同样的，如果下载速度太慢，右键<code>复制链接地址</code>，粘贴到迅雷下载。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113000207889.png" alt="image-20210113000207889"></p>
<h2 id="GitHub-图床"><a href="#GitHub-图床" class="headerlink" title="GitHub 图床"></a>GitHub 图床</h2><h4 id="1-新建仓库"><a href="#1-新建仓库" class="headerlink" title="1. 新建仓库"></a>1. 新建仓库</h4><p>第一步要先在 GitHub 新建一个仓库用于存储图片。</p>
<p>打开自己 GitHub <a target="_blank" rel="noopener" href="https://github.com/">主页</a>，点击<kbd>New</kbd>新建仓库。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113000300203.png" alt="image-20210113000300203"></p>
<p><code>Repository name</code>填写仓库名字，<code>Description</code>填写仓库描述，勾选<code>Add a README file</code>，点击<kbd>Create repository</kbd>创建仓库。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113000500752.png" alt="image-20210113000500752"></p>
<h4 id="2-获取-repo-tokens"><a href="#2-获取-repo-tokens" class="headerlink" title="2. 获取 repo tokens"></a>2. 获取 repo tokens</h4><p>这个 token 主要用于让 PicGo 有权限往我们的仓库 push 代码(图片)。</p>
<p>点击自己的头像，选择<kbd>Settings</kbd>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113000533777.png" alt="image-20210113000533777"></p>
<p>选择<kbd>Developer settings</kbd>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113000731905.png" alt="image-20210113000731905"></p>
<p>点击 <kbd>Personal access tokens</kbd>。然后点击<kbd>Generate new token</kbd>，因为是敏感操作，此时需要确认密码。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113000830696.png" alt="image-20210113000830696"></p>
<p><code>Note</code>填写 token 用途，用于备忘。下面只需要勾选<code> repo</code>，只给更新仓库的权限。最后点击最下面的<kbd>Generate token</kbd>创建成功。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113001007861.png" alt="image-20210113001007861"></p>
<p>复制字符串下一步使用。注意，为了安全起见此字符串只会出现一次，点击其他页面后就无法再查看了，需要重新创建，所以最好先保存到本地编辑器中。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113001256619.png" alt="image-20210113001256619"></p>
<h4 id="3-PicGo-配置"><a href="#3-PicGo-配置" class="headerlink" title="3. PicGo 配置"></a>3. PicGo 配置</h4><p>打开 PicGo ,选择<code>图床设置</code>，选择<code>GitHub图床</code>，填写参数：</p>
<ul>
<li><code>设定仓库名</code>，填写格式为<code>用户名/仓库名</code></li>
<li><code>设定分支名</code>，填写默认分支<code>master</code>或者<code>main</code></li>
<li><code>设定Token</code>，填写上一步获取的 token 值</li>
<li><code>指定存储路径</code>，选填，可以自定义名称，比如用年月来分类，不填图片会上传在仓库根目录。</li>
<li><code>设定自定义域名</code>，用于修改返回的 url 前缀，不填则返回原始 url。后面配置CDN加速需要更改此项。</li>
</ul>
<p>选择<kbd>设为默认图床</kbd>，点击<kbd>确定</kbd>保存配置。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210112233928390.png" alt="image-20210112233928390"></p>
<p>配置完成后，点击<code>上传区</code>，随便选择电脑上一张图片拖动到上传区，上传成功后会弹窗提示，将该 url 复制到浏览器打开就可以看到图片。可以在<code>PicGo设置</code>，打开<code>上传后自动复制URL</code>，这样上传成功后图片 url 会自动复制在剪贴板，可以直接粘贴到记事本。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113223506305.png" alt="image-20210113223506305"></p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210112235620646.png" alt="image-20210112235620646"></p>
<h4 id="4-CDN-加速-jsDelivr"><a href="#4-CDN-加速-jsDelivr" class="headerlink" title="4. CDN 加速(jsDelivr)"></a>4. CDN 加速(jsDelivr)</h4><p>从上一步可以看到 GitHub 存储的图片地址是 <code>https://raw.githubusercontent.com</code> 开头的网址，这个域名在某些地方可能打不开或者很慢导致图片加载失败，所以我们需要对图片配置 CDN 加速。</p>
<p>CDN的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。具体原理见<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/1dae6e1680ff">CDN加速原理</a>。通俗来讲，就是 CDN 服务商在全球各个地方建立服务器把要加速的站点进行缓存备份，当你访问站点时实际上是从离你最近的服务器访问缓存，速度自然就快了。</p>
<p>既然要搭建这么多服务器，服务肯定是要收费的吧。在这个互联网时代，还真有免费 CDN —— jsDelivr CDN，不仅开源免费而且在中国大陆建有许多服务站点，官网还声称是中国大陆唯一拥有许可证的公有 CDN，所以速度、稳定性都可以放心了。</p>
<p>打开<a target="_blank" rel="noopener" href="https://www.jsdelivr.com/">jsDelivr CDN 官网</a>，可以看到 jsDelivr 支持 npm、GitHub、WordPress三个站点的加速，用于我们的GitHub图床是再适合不过了。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210112225345331.png" alt="image-20210112225345331"></p>
<p>在浏览器输入<code>https://cdn.jsdelivr.net/gh/用户名/仓库名/</code>，(注意最后的<code>/</code>不要丢)，可以打开我们在 GitHub 上创建的仓库的文件列表，说明我们在 Github 上创建的仓库已经默认被 jsDelivr 缓存了。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210112232127381.png" alt="image-20210112232127381"></p>
<p>所以只要把资源链接中的前面部分更改一下就可以使用 CDN 加速了。</p>
<p>例如，</p>
<p>原始图片地址的格式为<code>https://raw.githubusercontent.com/用户名/仓库名/分支名/目录/图片名.png</code>，<code>https://raw.githubusercontent.com/yushuaige/myblog/master/img/image-20201219114500183.png</code>，</p>
<p>更改后的图片地址的格式<code>https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/目录/图片名.png</code>，</p>
<p><code>https://cdn.jsdelivr.net/gh/yushuaige/myblog@master/img/image-20201219114500183.png</code>。</p>
<p>可以分别打开一下两个图片网址感受一下速度区别。</p>
<p><strong>PicGo 中需要改一下自定义域名</strong>，之后上传图片自动生成的链接就是 jsDelivr 的链接了。具体就是在<code>设定自定义域名</code>填写<code>https://cdn.jsdelivr.net/gh/用户名/仓库名@master</code>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210112232746338.png" alt="image-20210112232746338"></p>
<h4 id="5-Typora-配置"><a href="#5-Typora-配置" class="headerlink" title="5. Typora 配置"></a>5. Typora 配置</h4><p>打开<code>文件</code>，<code>偏好设置</code>，<code>图像</code>，选择插入图片时<code>上传图片</code>，勾选图中三个选项，上传服务设定选择<code>PicGo (app)</code>，PicGo 路径通过后面的文件夹选择自己电脑上 PicGo 的安装路径。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210112233235226.png" alt="image-20210112233235226"></p>
<p>此时，使用 Typora 编辑文件，拖入或者粘贴图片时，会自动调用 PicGo 将图片上传到我们的 GitHub 图床，并把返回的图片链接粘贴到文章中，快去试试吧。</p>
<h2 id="Gitee-图床"><a href="#Gitee-图床" class="headerlink" title="Gitee 图床"></a>Gitee 图床</h2><h4 id="1-新建仓库-1"><a href="#1-新建仓库-1" class="headerlink" title="1. 新建仓库"></a>1. 新建仓库</h4><p>第一步要先在 Gitee 新建一个仓库用于存储图片。</p>
<p>打开自己 Gitee <a target="_blank" rel="noopener" href="https://gitee.com/">主页</a>，点击右上角的<kbd>+</kbd>号新建仓库。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113220514529.png" alt="image-20210113220514529"></p>
<p>依次填写<code>仓库名称</code>，<code>路径</code>，<code>仓库介绍</code>，注意要勾选<code>公开</code>和<code>使用Readme文件初始化这个仓库</code>，最后点击<kbd>创建</kbd>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113221426230.png" alt="image-20210113221426230"></p>
<h4 id="2-获取私人令牌"><a href="#2-获取私人令牌" class="headerlink" title="2. 获取私人令牌"></a>2. 获取私人令牌</h4><p>同样的，<code>私人令牌</code>和 GitHub 上的 token 一样，主要用于让 PicGo 有权限往我们的仓库 push 代码(图片)。</p>
<p>点击自己的头像，选择<code>设置</code>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113222056606.png" alt="image-20210113222056606"></p>
<p>点击<code>私人令牌</code>，选择<kbd>生成新令牌</kbd>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113222420963.png" alt="image-20210113222420963"></p>
<p>同样的，我们只勾选更新代码的权限。填写<code>私人令牌描述</code>，点击<kbd>提交</kbd>。因为是敏感操作，此时需要确认密码。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113222755852.png" alt="image-20210113222755852"></p>
<p>复制字符串下一步使用。注意，为了安全起见此字符串只会出现一次，点击其他页面后就无法再查看了，需要重新创建，所以最好先保存到本地编辑器中。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113223101983.png" alt="image-20210113223101983"></p>
<h4 id="3-PicGo-配置-1"><a href="#3-PicGo-配置-1" class="headerlink" title="3. PicGo 配置"></a>3. PicGo 配置</h4><p>PicGo 本体没有支持 Gitee ，所以需要下载一个插件，有人己经写好了。</p>
<p>打开 PicGo ，点击 <code>插件设置</code>，搜索框输入<code>gitee</code>，目前有两个插件应该都能用，任选一个安装，这里我选择的后面那个。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113225243341.png" alt="image-20210113225243341"></p>
<p>安装好插件后，这时再选择<code>图床设置</code>，选择<code>gitee</code>，填写参数：</p>
<ul>
<li><code>repo</code>，填写格式为<code>用户名/仓库名</code></li>
<li><code>branch</code>，填写默认分支<code>master</code></li>
<li><code>token</code>，填写上一步获取的私人令牌的值</li>
<li><code>path</code>，选填，可以自定义名称，不填图片会上传在仓库根目录。</li>
<li><code>customPath</code>，这个会在上一个参数的基础上再创建一层子文件夹用于按年、年月或年季来分类保存。</li>
<li><code>customUrl</code>，用于修改返回的 url 前缀，不填则返回原始 url。后面解决<code>文件大于1M，登录后可见</code>的问题需要更改此项。</li>
</ul>
<p>在 PicGo 里，GitHub 的设置都是中文的， Gitee 插件的设置反而都是英文的，有点意思hh。</p>
<p>选择<kbd>设为默认图床</kbd>，点击<kbd>确定</kbd>保存配置。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113224703801.png" alt="image-20210113224703801"></p>
<p>配置完成后，点击<code>上传区</code>，随便选择电脑上一张图片拖动到上传区，上传成功后会弹窗提示，将该 url 复制到浏览器打开就可以看到图片。可以在<code>PicGo设置</code>，打开<code>上传后自动复制URL</code>，这样上传成功后图片 url 会自动复制在剪贴板，可以直接粘贴到记事本。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210112235111559.png" alt="image-20210112235111559"></p>
<p><img src="https://gitee.com/yushuaigee/myblog/raw/master/img/image-20210113224024050.png" alt="image-20210113224024050"></p>
<h4 id="4-Typora-配置"><a href="#4-Typora-配置" class="headerlink" title="4. Typora 配置"></a>4. Typora 配置</h4><p>打开<code>文件</code>，<code>偏好设置</code>，<code>图像</code>，选择插入图片时<code>上传图片</code>，勾选图中三个选项，上传服务设定选择<code>PicGo (app)</code>，PicGo 路径通过后面的文件夹选择自己电脑上 PicGo 的安装路径。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210112233235226.png" alt="image-20210112233235226"></p>
<p>此时，使用 Typora 编辑文件，拖入或者粘贴图片时，会自动调用 PicGo 将图片上传到我们的 Gitee 图床，并把返回的图片链接粘贴到文章中，快去试试吧。</p>
<h4 id="5-解决”文件大于1M，登录后可见”问题"><a href="#5-解决”文件大于1M，登录后可见”问题" class="headerlink" title="5. 解决”文件大于1M，登录后可见”问题"></a>5. 解决”文件大于1M，登录后可见”问题</h4><p>从上一步可以看到 Gitee 存储的图片地址是 <code>https://gitee.com/yushuaigee/myblog/raw</code> 开头的网址，这个域名是国内站点，速度很快，无需配置CDN加速，图床配置好之后，图片上传成功，在浏览器也能打开，看似没毛病，其实暗藏玄机。</p>
<p>如果你上传的图片大于 1M ，不管是在下一步的 Typora 中还是在浏览器网页中，是无法加载出图片的，比如这张图片<code>https://gitee.com/yushuaigee/myblog/raw/master/img/myblog.gif</code>，输入到浏览器会显示<code>文件大于1M，登录后可见</code>。如果能打开是因为你前面已经登录了 Gitee 了，浏览器新建一个无痕窗口就打不开了。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113230821769.png" alt="image-20210113230821769"></p>
<p>可是别人在浏览我们博客时不可能要先登录个 Gitee 吧，所以要想办法解决一下。前面我们将博客仓库打开 Gitee Pages 功能，其他人可以访问我们博客仓库里的博客了，图床仓库也一样，打开它的  Gitee Pages 功能，无需登陆就可以访问里面的图片了。</p>
<p>进入图床仓库主页，点击<code>服务</code>，<code>Gitee Pages</code>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113231334002.png" alt="image-20210113231334002"></p>
<p>点击<code>启动</code>部署。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113232431704.png" alt="image-20210113232431704"></p>
<p>这样我们就可以通过Gitee Pages 地址来访问图床仓库里的图片了 ，地址前缀需要改一下。</p>
<p>例如，</p>
<p>原始图片地址的格式为<code>https://gitee.com/用户名/仓库名/raw/分支名/目录/图片名.png</code>，<code>https://gitee.com/yushuaigee/myblog/raw/master/img/myblog.gif</code>，</p>
<p>更改后的图片地址的格式<code>https://用户名.gitee.io/仓库名/目录/图片名.png</code>，</p>
<p><code>https://yushuaigee.gitee.io/myblog/img/myblog.gif</code>。</p>
<p><strong>对应的，PicGo 中就需要改一下自定义域名</strong>，之后上传图片自动生成的链接就是 Gitee Pages 上的地址了。具体就是在<code>customUrl</code>填写<code>https://用户名.gitee.io/仓库名</code>。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113233142363.png" alt="image-20210113233142363"></p>
<p><strong>这种方法也存在一个问题</strong>，就是因为 Gitee Pages 不支持自动更新 (pro版支持，需要收费)，每次上传完图片后，需要打开浏览器手动点一下更新。你可以写完文章，把图片一把上传，再点一次更新，但是终究还是有点麻烦。</p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113231428575.png" alt="image-20210113231428575"></p>
<p><strong>为了解决这个问题，我写了一个自动化脚本</strong>，双击启动就可以自动完成 Gitee Pages 部署，其实原理就是利用 pyppeteer 模拟用户登录，到部署页面模拟点击<code>更新</code>按钮，虽然还是需要启动一下脚本，但是也稍微省了点事儿，下一篇文章将自动部署 Hexo 和 自动部署 Gitee Pages  结合起来。</p>
<p><strong>效果</strong></p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113233250172.png" alt="image-20210113233250172"></p>
<p><img src="https://yushuaigee.gitee.io/myblog/img/image-20210113233443911.png" alt="image-20210113233443911"></p>
<p><strong>start.bat 源码</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">:: start.bat 源码</span><br><span class="line">:: python路径 + 空格 + 脚本路径</span><br><span class="line">C:\Python\Scripts\python.exe D:/scripts/post_my_blog.py</span><br><span class="line">pause</span><br></pre></td></tr></table></figure>
<p><strong>post_my_blog.py 源码</strong></p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># post_my_blog.py 源码</span></span><br><span class="line"><span class="comment"># 注意: 更改25、36、52行的用户名密码为自己的Gitee的用户名密码，第45行的仓库名为图床仓库的名字</span></span><br><span class="line"><span class="comment"># 每处延时都有用，是我花了好长时间调试过的</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> asyncio</span><br><span class="line"><span class="keyword">import</span> os</span><br><span class="line"></span><br><span class="line"><span class="keyword">from</span> pyppeteer <span class="keyword">import</span> launch</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">def</span> <span class="title">_update_gitee_pages</span>(<span class="params">usr_name, repo_name</span>):</span></span><br><span class="line">	browser = <span class="keyword">await</span> launch(devtools=<span class="literal">False</span>, dumpio=<span class="literal">True</span>, autoClose=<span class="literal">True</span>,</span><br><span class="line">                           args=[<span class="string">&#x27;--start-maximized&#x27;</span>,  <span class="comment"># 设置浏览器全屏</span></span><br><span class="line">                                 <span class="string">&#x27;--no-sandbox&#x27;</span>,  <span class="comment"># 取消沙盒模式，沙盒模式下权限太小</span></span><br><span class="line">                                 <span class="string">&#x27;--disable-infobars&#x27;</span>,  <span class="comment"># 关闭受控制提示</span></span><br><span class="line">                                 <span class="comment"># 设置ua</span></span><br><span class="line">                                 <span class="string">&#x27;--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3542.0 Safari/537.36&#x27;</span></span><br><span class="line">                                 ],</span><br><span class="line">                           userDataDir=os.path.abspath(<span class="string">&#x27;./cookies&#x27;</span>))</span><br><span class="line">    page = <span class="keyword">await</span> browser.newPage()</span><br><span class="line">    <span class="comment"># 登录</span></span><br><span class="line">    <span class="keyword">await</span> page.goto(<span class="string">&#x27;https://gitee.com/login&#x27;</span>)</span><br><span class="line">    <span class="keyword">await</span> page.waitFor(<span class="number">2000</span>)</span><br><span class="line">    <span class="keyword">if</span> <span class="string">&#x27;登录&#x27;</span> <span class="keyword">in</span> <span class="keyword">await</span> page.title():</span><br><span class="line">        <span class="keyword">await</span> page.<span class="built_in">type</span>(<span class="string">&#x27;#user_login&#x27;</span>, <span class="string">&#x27;用户名&#x27;</span>)</span><br><span class="line">        <span class="keyword">await</span> page.<span class="built_in">type</span>(<span class="string">&#x27;#user_password&#x27;</span>, <span class="string">&#x27;密码&#x27;</span>)</span><br><span class="line">        <span class="keyword">await</span> page.keyboard.press(<span class="string">&#x27;Enter&#x27;</span>)</span><br><span class="line">        print(<span class="string">&#x27;使用账号密码登录成功...&#x27;</span>)</span><br><span class="line">        <span class="keyword">await</span> page.waitFor(<span class="number">2000</span>)</span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        print(<span class="string">&#x27;使用cookies缓存登录成功...&#x27;</span>)</span><br><span class="line">    <span class="comment"># 更新</span></span><br><span class="line">    <span class="keyword">await</span> page.goto(<span class="string">&#x27;https://gitee.com/%s/%s/pages&#x27;</span> % (usr_name, repo_name))</span><br><span class="line">    <span class="keyword">await</span> page.waitFor(<span class="number">2000</span>)</span><br><span class="line">    page.on(<span class="string">&#x27;dialog&#x27;</span>, <span class="keyword">lambda</span> dialog: asyncio.ensure_future(_handle_dialog(page, dialog)))</span><br><span class="line">    <span class="keyword">await</span> page.click(<span class="string">&#x27;#pages-branch &gt; div.button.orange.redeploy-button.ui.update_deploy&#x27;</span>)</span><br><span class="line">    <span class="keyword">await</span> page.waitFor(<span class="number">20000</span>)</span><br><span class="line">    print(<span class="string">&#x27;更新 Gitee Pages %s 成功...&#x27;</span> % repo_name)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">def</span> <span class="title">_handle_dialog</span>(<span class="params">page, dialog</span>):</span></span><br><span class="line">    <span class="keyword">await</span> page.waitFor(<span class="number">2000</span>)</span><br><span class="line">    print(<span class="string">&#x27;点击确定更新&#x27;</span>)</span><br><span class="line">    <span class="keyword">await</span> dialog.accept()</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">update_gitee_pages</span>(<span class="params">usr_name, repo_name</span>):</span></span><br><span class="line">    asyncio.get_event_loop().run_until_complete(_update_gitee_pages(usr_name, repo_name))</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> __name__ == <span class="string">&#x27;__main__&#x27;</span>:</span><br><span class="line">    update_gitee_pages(<span class="string">&#x27;用户名&#x27;</span>, <span class="string">&#x27;仓库名&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="后续"><a href="#后续" class="headerlink" title="后续"></a>后续</h2><p>两个图床都不完美，所以究竟选哪个呢？让我这个强迫症很纠结。我尝试了各种组合方案，最终总结了两个方案：</p>
<ol>
<li> Typora + PicGo + GitHub图床 + jsDelivr CDN加速</li>
<li> Typora + PicGo + Gitee图床 + Gitee Pages + 自动部署脚本</li>
</ol>
<p>第一种方案似乎比较完美，但是美中不足的是虽然CDN加速解决了查看图片的速度，但是上传还是有点慢的，会出现在 Typora 中粘贴了一张图片后需要5秒以上才能上传成功并加载出来，还有就是本地没有分类备份(其实在<code>C:\Users\用户名\AppData\Roaming\Typora\typora-user-images</code>目录下有缓存)。</p>
<p>第二种方案速度没的说，通过 Gitee Pages  也解决了大图片的问题，通过脚本也解决了自动部署的问题，但是在 Typora 中粘贴了一张图片后，由于没有<code>更新</code>部署，实际上还不能访问，所以不能实时预览，需要用脚本自动部署后重新打开 Typora 才能加载出图片。我想了一种办法，就是在 Typora 设置插入图片时保存在本地，这样就实时加载，还能在本地存一份备份，然后写脚本将文件夹里图片用 PicGo 批量上传然后再调脚本自动部署，然后再自动将 md 文件中的本地链接都改成图床链接。看似麻烦还是可行的，下一篇文章中再实现吧。</p>
<p>我暂时选择了第一种方案。.</p>
<p>本篇文章介绍怎么搭建自己的 GitHub 和 Gitee 免费图床并搭配 Typora 和 PicGo 工具使用 ，两种图床都有自己的好处和缺点，我也尝试了提供了解决办法。</p>
<p>自己搭建的博客漂亮且方便，但终究不如在 CSDN 等成熟的平台上发布博客曝光量大。所以我们写完博客想在 CSDN 和自己的博客站点同时发布，我们怎么可能一篇一篇地手动复制呢，当然是自动化脚本实现啦。接下来两篇文章介绍一下怎么一键在三个站点发布博客，以及怎么快速把 CSDN 的旧博客迁移到自己的站点。</p>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <div class="declare">
      <ul class="post-copyright">
        <li>
          <i class="ri-copyright-line"></i>
          <strong>版权声明： </strong>
          
          本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
          
        </li>
      </ul>
    </div>
    
    <footer class="article-footer">
       
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://example.com/2021/01/14/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E4%BA%94)%E2%80%94%E2%80%94Typora%20+%20PicGo%20+%20GitHub%20Gitee%E5%9B%BE%E5%BA%8A/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>  
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Hexo/" rel="tag">Hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" rel="tag">博客搭建</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E5%9B%BE%E5%BA%8A/" rel="tag">图床</a></li></ul>

    </footer>
  </div>

   
  <nav class="article-nav">
    
      <a href="/2021/01/24/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E5%85%AD)%E2%80%94%E2%80%94%E4%B8%89%E4%B8%AA%E7%AB%99%E7%82%B9%E4%B8%80%E9%94%AE%E5%8F%91%E5%B8%83%E5%8D%9A%E5%AE%A2/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            从零开始免费搭建自己的博客(六)——三个站点一键发布博客
          
        </div>
      </a>
    
    
      <a href="/2021/01/11/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2(%E5%9B%9B)%E2%80%94%E2%80%94%E7%BC%96%E5%86%99Markdown%E6%96%87%E7%AB%A0%E5%88%A9%E5%99%A8%20Typora/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">从零开始免费搭建自己的博客(四)——编写Markdown文章利器 Typora</div>
      </a>
    
  </nav>

   
<!-- valine评论 -->
<div id="vcomments-box">
  <div id="vcomments"></div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: "#vcomments",
    app_id: "zy6yBRj9KkWO2XxsT94n1DIW-gzGzoHsz",
    app_key: "auroBE2PQXkQ05CLi30SFv92",
    path: window.location.pathname,
    avatar: "monsterid",
    placeholder: "给我的文章加点评论吧~",
    recordIP: true,
  });
  const infoEle = document.querySelector("#vcomments .info");
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
    infoEle.childNodes.forEach(function (item) {
      item.parentNode.removeChild(item);
    });
  }
</script>
<style>
  #vcomments-box {
    padding: 5px 30px;
  }

  @media screen and (max-width: 800px) {
    #vcomments-box {
      padding: 5px 0px;
    }
  }

  #vcomments-box #vcomments {
    background-color: #fff;
  }

  .v .vlist .vcard .vh {
    padding-right: 20px;
  }

  .v .vlist .vcard {
    padding-left: 10px;
  }
</style>

 
   
  
</article>

</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2020-2021
        <i class="ri-heart-fill heart_icon"></i> 杰克小麻雀
      </li>
    </ul>
    <ul>
      <li>
        
        
        
        由 <a href="https://hexo.io" target="_blank">Hexo</a> 强力驱动
        <span class="division">|</span>
        主题 - <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>访问人数:<span id="busuanzi_value_site_uv"></span></s>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>浏览次数:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
      </li>
    </ul>
  </div>
</footer>
      <div class="float_btns">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

      </div>
    </main>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/favicon.ico" alt="半亩方塘"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/friends">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="搜索">
        <i class="ri-search-line"></i>
      </a>
      
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/img/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/img/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->


<script src="/js/tocbot.min.js"></script>

<script>
  tocbot.init({
    tocSelector: '.tocbot',
    contentSelector: '.article-entry',
    headingSelector: 'h1, h2, h3, h4, h5, h6',
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: 'main',
    positionFixedSelector: '.tocbot',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto'
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>

<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->


<script src="/js/busuanzi-2.3.pure.min.js"></script>


<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->


<script src="/js/clickBoom2.js"></script>


<!-- CodeCopy -->


<link rel="stylesheet" href="/css/clipboard.css">

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>


<!-- CanvasBackground -->


    
  </div>
</body>
<script type="text/javascript">
if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
  document.write('<script type="text/javascript" src="/js/FunnyTitle.js"><\/script>');
  document.write('<script type="text/javascript" src="/js/snow.js"><\/script>');
}
</script>
</html>